<template>
  <div>
    <el-main>
      <div class="form_title">商户信息</div>
      <div class="form_content">
        <el-form
          ref="form"
          label-width="80px"
          :model="model"
          :rules="rules"
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="名称" prop="name">
                <el-input
                  placeholder="请输入名称"
                  v-model="model.name"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="商户号" prop="merchantId">
                <el-input
                  placeholder="请输入商户号"
                  v-model="model.merchantId"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="私钥文件" prop="privateKey">
                <el-input
                  placeholder="请输入私钥文件"
                  v-model="model.privateKey"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="商户证书序列号" prop="merchantSerialNumber">
                <el-input
                  placeholder="请输入商户证书序列号"
                  v-model="model.merchantSerialNumber"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="APIv2密钥" prop="apiV2Key">
                <el-input
                  placeholder="请输入APIv2密钥"
                  v-model="model.apiV2Key"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="APIv3密钥" prop="apiV3Key">
                <el-input
                  placeholder="请输入APIv3密钥"
                  v-model="model.apiV3Key"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :rows="5" v-model="model.remark" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-main>
    <el-footer>
      <el-button
        icon="el-icon-close"
        size="small"
        @click="$router.go(-1)"
      >取消</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-check"
        size="small"
        @click="handleSave"
      >保存</el-button
      >
    </el-footer>
  </div>
</template>

<script>
  import {savePay,getPay} from "@/api/tenant/pay";
  import {ApiError} from "@/utils/errors";

  export default {
    data() {
      return {
        model: {
          id: null,
          tenantId: null,
          name: null,
          merchantId: null,
          privateKey: null,
          merchantSerialNumber: null,
          apiV2Key: null,
          apiV3Key: null,
          remark: null
        },
        rules: {
          name: [{ required: true, message: "名称必须填写", trigger: "blur" }],
          merchantId: [{ required: true, message: "商户号必须填写", trigger: "blur" }],
          privateKey: [{ required: true, message: "私钥必须填写", trigger: "blur" }],
          merchantSerialNumber: [{ required: true, message: "序列号必须填写", trigger: "blur" }],
          apiV2Key: [{ required: true, message: "V2密钥必须填写", trigger: "blur" }],
          apiV3Key: [{ required: true, message: "V3密钥必须填写", trigger: "blur" }]
        }
      }
    },
    created() {
      this.get(this.$route.query.tenantId);
    },
    methods: {
      get(id){
        this.model.tenantId = id;
        const that = this;
        const params = {id:id};
        getPay(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            if(res.data.data){
              that.model.id = res.data.data.id;
              that.model.name = res.data.data.name;
              that.model.merchantId = res.data.data.merchantId;
              that.model.privateKey = res.data.data.privateKey;
              that.model.merchantSerialNumber = res.data.data.merchantSerialNumber;
              that.model.apiV2Key = res.data.data.apiV2Key;
              that.model.apiV3Key = res.data.data.apiV3Key;
              that.model.remark = res.data.data.remark;
            }
          }
        });
      },
      handleSave() {
        const that = this;
        this.$refs.form.validate(valid => {
          if (!valid) {
            return;
          }
          savePay(that.model).then(res => {
            if (res.status == 200) {
              if (!res.data.success) {
                return this.$message.error(ApiError.msg(res.data.message));
              }
              this.$message.success("保存商户成功");
              that.$router.go(-1);
            }
          });
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form_title {
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
  }
  .form_content {
    padding-right: 16px;
  }
  .input_suffix {
    display: inline-block;
    padding: 0 6px;
  }
  .el-divider {
    margin: 6px 0 16px;
  }
  .add_new_batch {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    height: 45px;
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    color: #8c939d;
  }
  .batch_block {
    margin-top: 16px;
  }
  .batch_block:first-child {
    margin-top: 0;
  }
  @import "@/styles/full-form";
  @import "@/styles/common-table";
</style>
